<template>
  <a :class="{active:ifScreenfull}" @click="screenfull_()"><i class="fa fa-expand fa-fw text"></i><i class="fa fa-compress fa-fw text-active"></i></a>
</template>
<script>

  import screenfull from 'screenfull'

  export default{
    data: function () {
      return {
        ifScreenfull: false
      }
    },
    methods: {
      screenfull_(){
        if (this.ifScreenfull) {
          screenfull.exit();
          this.ifScreenfull = false;
        } else {
          if (screenfull.enabled) {
            screenfull.request();
            this.ifScreenfull = true;
          }
        }
      }
    }
  }
</script>
